
<script setup>
import { reactive, ref } from 'vue';

// 每一个素材卡片组件
import GraphicTextCardItem from "./helpers/GraphicTextCardItem.vue";
const GraphicTextCardItemRef = ref()

// 素材库
import ChooseMaterial from "@/views/shotstack/EditingCenter/modules/bottomSet/components/chooseMaterial.vue";

// 图片查看弹窗
import viewImg from "@/views/shotstack/components/dialogComponent/viewImg.vue";
const viewImgRef = ref()

const emit = defineEmits(['updateMaterialList:arr'])

const props = defineProps({
    images: {
        type: Array,
        default: () => {
            return []
        }
    },
})

const state = reactive({
    materiallibraryShow:false
})

// 用于回显的文件夹项目层级id
const folder_ids = ref({
  // 默认打开的项目id
  merchant_library_id: null,
  // 默认打开的文件夹id
  merchant_folder_statck_id: null,
  group_id: null
})

// 素材库组件 emit 退出时的项目和文件夹位置
const storeMemory = (data) => {
  console.log(data, '退出时的项目和文件夹位置');
  Object.assign(folder_ids.value, data)
}

// 打开素材库
const materialUploadHandle = () => {
  state.materiallibraryShow = true;
};


// 素材图片预览
const toView = (data) => {
  console.log(data, '预览的图片');
  // 查看图片
  data?.material_url && viewImgRef.value.open(data.material_url);
};

// 素材删除
const delItem = (item) => {
    const copyList = JSON.parse(JSON.stringify(props.images))

    const index = copyList.findIndex((ele) => ele.id == item.id);
    if (index != -1) {
        copyList.splice(index, 1)
        emit('updateMaterialList', copyList)
    }
}

// 素材导入回调
const closeChooseMaterial = (data, key) => {
  if (!data) {
    state.materiallibraryShow = false; //关闭弹窗
    return;
  }
  console.log(data, '选择的素材');
  
  console.log(key, "keykeykeyyeyeyeyeye");
  
  // state.newChooseMaterialShow = false; //关闭弹窗
    state.materiallibraryShow = false; //关闭弹窗

    const copyList = JSON.parse(JSON.stringify(props.images))
  if (copyList.length >= 50) {
    return message.warning("单视频组最多可添加50个素材");
  } else if (
    data.length >= 1 &&
    copyList.length + data.length > 50
  ) {
    message.warning("单视频组最多可添加50个素材, 已自动去除多余素材");
    const sliceNum = 50 - copyList.length; // 计算可以添加的素材数量
    const existingIds = copyList.map((item) => item.id);
    // 遍历data，只添加未在existingIds中出现的素材
    let finds = data.filter(
      (ele) => !existingIds.some((i) => i == `${ele[key]}_${ele.id}`)
    );
    finds = finds.slice(0, sliceNum);
    data = finds;
  }

  console.log(data,'选择的素材');
  
  let filterList = data?.map((item, index) => {
    return {
      // 文件
      material_url: item.material_url,
      // 文件名称
      material_name: item.material_name,
      // 素材类型
      scene_type: item[key],
      // id
      org_id: item.org_id,
      // 文件时长
      material_duration: item.material_duration,
      // 文件后缀
      material_extension: item.material_extension,
      // 文件大小
      material_size: item.material_size,
      // 素材路径
      material_path: item.material_path,
      // 素材id
      material_id: item.id,
      // 文件路径
      url: item.material_url,
      // 阿里云需要使用的 media_id
      media_id: item?.oss_media_id || "",
      id: item.id,
      width: item?.width,
      height: item?.height
    };
  });
  if (!filterList?.length) return;

    let showMsg = false;
    
  filterList.forEach((item) => {
    // 去重
    const index = copyList.findIndex(
      (existingItem) => existingItem.id == item.id
    );
    if (index == -1) {
      copyList.push({
        ...item,
        material_duration:0,
      });
    } else {
      showMsg = true;
    }
  });

    if (showMsg) message.info("已为您自动去除重复素材");
  
    emit('updateMaterialList', copyList)
};

</script>

<template>

<div class="material_box">
<!-- 上传的卡片 -->
<div class="upload_box">
  <div class="upload_desc">
    <div style="font-size: 24px; font-weight: 600">+</div>
    <div>添加素材</div>
  </div>
  <div class="upload_img_mask">
    <!-- <span class="upload_img-local" @click="popularMaterialHandle"><upload-outlined />热门素材</span>
    <span class="line"></span> -->
    <span class="upload_img-origin" @click="materialUploadHandle"><download-outlined />素材库导入</span>
  </div>
</div>

  <GraphicTextCardItem
  v-for="item in props.images"
  :key="item.id"
  :item="item" 
  @delItem="delItem" 
  @toView="toView" 
  @repaint="repaint" 
  :viewMore="false"
  >
</GraphicTextCardItem>
</div>

<!-- 图片预览弹窗 -->
<viewImg ref="viewImgRef"></viewImg>

<!-- 素材弹窗 -->
<ChooseMaterial 
  :isClip="false" 
  :multiple="true" 
  :visible="state.materiallibraryShow" 
  :folder_ids="folder_ids"
  @close="closeChooseMaterial($event, 'material_type')" 
  @storeMemory="storeMemory" 
/>
</template>

<style lang="less" scoped>
  @cart_bgc: #f1f3f5;

    // 素材列表 外部容器
    .material_box{
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));  
      gap: 8px 0;  

          // 添加素材的卡片样式
    .upload_box {
      width: 84px;
      height: 120px;
      border-radius: 5px;
      position: relative;
      margin: 0 5px;

      &:hover {
        & .upload_img_mask {
          opacity: 1;
        }
      }

      .upload_img_mask {
        position: absolute;
        left: 0;
        top: 0;
        width: 84px;
        height: 114px;
        background: #f1f3f5;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        opacity: 0;

        .upload_img-local,
        .upload_img-origin {
          align-items: center;
          justify-content: center;
          display: flex;
          height: 48%;
          font-size: 12px;
        }

        .line {
          height: 1px;
          width: 80%;
          background: #dde2e9;
        }

        & span {
          cursor: pointer;

          &:hover{
            color: var(--ss-primary-color-hover);
          }
        }
      }

      // 鼠标触摸之前的描述文本
      .upload_desc {
        background: @cart_bgc;
        width: 84px;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
    }
      
    }
</style>